<template>
  <div>
    <el-input
      disabled
      v-model="$route.query.username"
      style="width: 95%; margin: 20px"
    ></el-input>
    <el-tree
      style="margin: 20px 0"
      :props="defaultProps"
      :data="authList"
      node-key="id"
      show-checkbox
      default-expand-all
      ref="mesage"
    />
    <div style="margin-left: 20px">
      <el-button type="primary" @click="save">保存 </el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>
  
  <script>
import { asyncGetAssignList, asynCallotJurisdiction } from "@/api/acl/role";
import { Message } from "element-ui";
export default {
  name: "Auth",
  data() {
    return {
      // 权限列表
      authList: [],
      // 树形控件战术的类型
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  mounted() {
    this.getAssignList();
  },
  methods: {
    // 获取权限列表的功能函数
    async getAssignList() {
      try {
        let res = await asyncGetAssignList(this.$route.query.roleId);
        this.authList = res.data.children;
        let authIdList = this.getSelect(this.authList);
        // console.log(this.$refs.mesage);
        this.$refs.mesage.setCheckedKeys(authIdList);
      } catch (error) {
        console.log(error);
      }
    },
    //初始化选中的函数
    getSelect(arr, idList = []) {
      arr.forEach((item) => {
        if (item.select && item.level === 4) {
          idList.push(item.id);
        } else if (item.children) {
          this.getSelect(item.children, idList);
        }
      });
      return idList;
    },
    // 点击保存的回调
    async save() {
      // 选中id数组
      let CheckedKeys = this.$refs.mesage.getCheckedKeys();
      // 半选中数组
      let HalfCheckedKeys = this.$refs.mesage.getHalfCheckedKeys();
      // console.log(CheckedKeys, "CheckedKeys");
      // console.log(HalfCheckedKeys, "HalfCheckedKeys");
      let totalIdARrr = CheckedKeys.concat(HalfCheckedKeys).join(",");
      try {
        let res = await asynCallotJurisdiction(
          this.$route.query.roleId,
          totalIdARrr
        );
        // console.log(res);
        Message.success("分配权限成功");
        this.$router.push("/acl/role");
      } catch (error) {
        console.log(error);
      }
    },
    // 取消的回调
    cancel() {
      this.$router.push({
        path: "/acl/role",
      });
    },
  },
};
</script>
  
  <style>
</style>